Savia - Premium WP Theme

Welcome to Savia Template Documentation and thank you for your purchase and choice on using our theme.

 

 

Files updated in v1.2

 

 

Files updated in v1.01

 

 

Installation

Basic Installation

To install the theme you must have an operating version of WordPress already installed. For information regarding WordPress installation, please visit - Installing Wordpress

Extract the zipped package downloaded from ThemeForest to your desktop, in it you will find Savia.zip file which is the wordpress theme.

You can install the theme in two ways:

After uploading the theme, you have to activate it. Navigate to Appearence -> Themes page to activate your new theme.

Migration from another theme

If you are migrating from a different theme you need to make sure you resize the previously uploaded images in order to be able to reuse them with Savia. Luckily you have a cool plugin that does this automatically for you - install Regenerate Thumbnails plugin and run the resizing procedure.

 

 

Importing Demo Data

We have included an XML file that contains all of our Demo data, You may find this useful in setting up your theme. Instructions on how to import follow:

1. Locate the file in the root folder of your package - '/DemoData/SaviaDemoData.xml'
2. Navigate to WP Admin -> Tools -> Import.
3. Select and install WordPress importer.
4. Select the XML file and upload it. Wait for the content and the images to Import (this might take awhile depending on server load). If you don't have WooCommerce installed you might get some warning for the products not being able to get imported, if you do have Woocommerce installed you will get all products and categories installed as well. After all Demo data imports you can remove (Trash) the default WooCommerce pages (Shop, My Account, Cart, Checkout) as your WooCommerce installation will create new ones instead.
5. To enable the Demo Menu we are using go to: Admin -> Appearance -> Menus page -> Manage Locations tab and select the 'Main Navigation' option for the Main Navigation of your website.
6. Next, navigate to WP Admin -> Settings -> Reading Settings and set a front page and a posts page (more here).
7. Continue setting up your Theme using Appearance->Customize and Savia Options. Make sure you explore those areas well as that's where you customize your theme's colors, logo, fonts, custom options etc.

 

 

Creating Pages

Pages are built via the powerful shortcodes that come with the theme. To setup your own homepage, create a new page with 'Default Template' page template and start adding content to id via the Editor. Make sure you play around with the shortcodes kitchen Sink - the bottom line of icons in the editor that generate the theme specific shortcodes we have provided with the theme.

Once done with adding content to a Page you can set is as your website Homepage, navigate to WP Admin -> Settings -> Reading Settings and set the newly created page as your 'Front page'.

 

 

Setup Blog/News Page

To create your BlogPage create a new page with 'Default Template' page template and name it 'Our Blog' for example. To then set as your Blog page navigate to WP Admin -> Settings -> Reading Settings and set the newly created page as your 'Posts page'.

 

 

Portfolio Pages

To create your Portfolio Page create a new page with 'Template - Portfolio Page' page template and name it 'Portfolio' for example. This will be your main portfolio filtering page.

To add Items to your Portfolio use the custom post type created for them. You should also create categories for your items that can later automatically be used to filter your portfolio items by users. There are 3 different portfolio item formats: Standard, Gallery & Video. If you want to create a gallery type portfolio item after choosing that Format, click on Featured Image and upload several images at once by holding the CTRL key when given the option to select an image to upload by your operating system. If you want a Video Format portfolio item all you need to do is click the Video Format radio button, then paste your Video Embed code within the "Paste your Video Embed Code" field below your editor. Several templates are also available for your to choose for your portfolio items. 2 for Standard and 3 for Gallery. In order to use the custom post type Template Selector under your portfolio item edit screen install the Custom Post Templates plugin (it will be suggested to you by the Theme Installer right after theme installation). You can see examples of the portfolio item templates in our online demo. Make sure you test out the different templates as well to make sure you pick the right one for your needs.

Here's an example of a portfolio item content (one we have used in the Demo). 

<h4>Project Description</h4>
Savia WordPress Theme is all you need to create a clean design, cool looking website that your audience will appreciate.

It features various shortcodes to help you create stunning graphic elements that will help you deliver your message effectively.
<h5>What we did</h5>
[checklist type="arrowed" margin_bottom="no"]
<ul class="checked">
	<li>Wordpress Development</li>
	<li>Custom Themes</li>
	<li>Web Development</li>
	<li>Bespoke Solutions</li>
</ul>
[/checklist]
[button href="http://themeforest.net/user/blueowlcreative/portfolio?ref=blueowlcreative" target="_blank" css_classes="button_hilite tiny_button"][icon icon="forward"][/icon]Visit Project[/button]

 

 

Setup Contact Page

To create your Contact Page create a new page with 'Contact Page' page template and name it 'Contact Us'. If you want a map with your address on top of your contact page simply go to Savia Options -> Contact Page and add your Google map address there like for example: '540 W 50th St, New York, New York, United States'. You can also set an email different than your default WP admin email to receive mails from the contact page form.

Styling your Theme

Savia Options

Savia has plenty of customizable options that we have developed for you to make sure you. First off you can go to Savia Options (In your Dashboard, above Appearance). Here under your Header section you can upload a custom logo image for your website, Upload a custom Favicon + set all header Information you want to have like phone number/email contacts + Social icons + links. Under the Typography subsection you can set custom Google Fonts for various subsections/elements in your website + font-size for your navigation text. Next is the General section where you can setup your Layout type, enable/disable Responsive Design, enable Animated Containers Rows, enable/disable Breadcrumbs, edit custom Footer Text, Footer Social Icons, Sidebar layout etc. In the Portfolio section you can choose your Portfolio Style (you can see them in the Demo under Portfolio->Portfolio Styles), Enable Related Projects in Portfolio + Portfolio Items per Page. Under Sidebars you can create Dynamic Sidebars that you can later add Widgets to from the Widgets area and assign to specific Pages/Post. In the Contact Page section you set your Contact Page details. In WooCommerce you can customize your WooCommerce Store layouts + set seral further options for your online store.

 

Customize Screen

To customize your Website Name, its Navigation Style & its main highlight Color go to Appearance->Customize. Savia extends the default WP customization functionality to offer you real-time preview of your navigation/colors. Pick your choice of 10 premade cool menu styles as well as further select your menu color. In the CUSTOMIZE window you can also pick your main website Background/Background image + Main Highlight Color and preview the changes right away.

 

 

Manage Widgets

Managing your widgets takes places on the Appearance->Widgets page. You can add/remove widgets here for your precreated sidebars or your custom sidebars (custom sidebars are created at Appearance->Theme Options->Sidebars). The default Sidebars are Savia Sidebar (used in regular Post Pages using the 'Default Template'). For our Demo we've used: 'Custom Menu', 'Savia Latest Posts', 'Tag Cloud' + Text Widgets in which we have Pasted Shortcodes for Testimonial Carousel and Accordion (more on shorcodes in the next Section). There are also 4 predefined Widget Areas for the footer section in which you can place any widgets you want like we have.

 

 

 

 

Rows & Columns

Savia is based on the 'Skeleton Grid CSS Framework' - A Full width page (full wrapper) has 16 columns , a page with a sidebar is 12 columns. The attribute 'width' of the Column shortcode is important here and sets your column width. You can either use the number of columns (out of 16) that should decide your column's size - for example 'four' or you can use a convention like '1/2', '1/3', etc. Another important attribute is 'position'. You have 2 options here - 'first' and 'last', leave this attribute empty if it's a middle column. If 'first' is used then no starting margin will be used, if 'last' is used then no ending margin will be used + it's assumed that this column is last in current row and floats will be cleared. Make sure you play around with those to get the way it works + get the best result for your specific page/layout. Also note some of the shortcodes like Testimonials require the setting of a width attribute as well that should conform to the columns' width convention.

When using the full width page template a good practice is to devide your content into Rows of columns. You can use the shortcode generator for full width rows of columns:

 

The Row Container is the building block of a Full Width Page + you can define columns within it with just the click of a button and selecting the corresponding columns you want in it. It is also important for the animation of the different sections (gradual transitions once you have scrolled to a Row of content) on a page as the Javascript that makes the current row appear calculates the height of the row and shows it once the user has scrolled to the middle of it. You should also note that the "Animated Containers Rows" only make sense on a Full width page that is broken down to Container Rows.

All page content (including columns) when using the full width page template should be wrapped in a Row container!

The Row Container shortcode also takes in several paramters that let you customize its appearance and behavior, here's an example:

[row_container full_width="yes" dark="no" padded="yes" bgr_url="http://URL-TO-SOME-IMAGE.jpg" bgr_parallax="yes"]
	[column width="1/2" position="first"] First Column content [/column]
	[column width="1/2" position="last"] Second Column content [/column]
[/row_container]

Attributes:

Here's a more complex example:

[row_container full_width="yes" dark="no" padded="yes" bgr_url="http://URL-TO-SOME-IMAGE.jpg" bgr_parallax="yes"]
	[column width="four" position="first"] First Column content [/column]
	[column width="four" position=""] Second Column content [/column]
	[column width="eight" position="last"] Third Column content [/column]
[/row_container]

At times you may want to have a central column padded further than the default. A CSS class "margined20" is available for this specific case, use it like so - create your columns for example: 

[row_container full_width="yes" dark="no" padded="yes" bgr_url="" bgr_parallax="no"]
	[column width="1/3" position="first"] First Column content [/column]
	[column width="1/3" position=""] Second Column content [/column]
	[column width="1/3" position="last"] Third Column content [/column]
[/row_container]

Then switch to TEXT Editor (instead of Visual) and wrap the content of your middle column in a DIV tag with the class "margined20" like so:

[row_container full_width="yes" dark="no" padded="yes" bgr_url="" bgr_parallax="no"]
	[column width="1/3" position="first"] First Column content [/column]
	[column width="1/3" position=""] <div class="margined20">Second Column content</div> [/column]
	[column width="1/3" position="last"] Third Column content [/column]
[/row_container]

I am using this technique to push away the central column from the 1st and 3rd column (the 3 columns with the images below the slider).

I encourage you to play around with the Row Container shortcode and the column one respectively to get the hang of them. Also make sure you use just the column shortcode within pages/posts that are using the "Content+Sidebar template", as there you already have "four columns" of space used up for your sidebar and all you have left is 12 columns.

 

 

Shortcodes

Savia comes packed with plenty of custom shortcodes allowing you to add/customize complex styled content easily. The shortcodes are available in the formatting options on the post / page Visual text editor. Our shortcodes buttons are on the last row. Just hover any button to see which shortcode it is for; click it to use the shortcode and it will be automatically added to your post, then you need to populate the content/customize its attributes. Make sure you use the front end preview to make sure you get it all right. Some shortcodes require some playing around with (getting their attributes right etc). Let's go over our shortcodes:

 

Heading

[heading centered="yes" margin_bottom="no" large="no" background="no"]YOUR TEXT HERE[/heading]

Attributes:

Bolding a part of the title makes it inherit the Main Highlight color

 

Big Heading

[big_heading centered="no"]YOUR TEXT HERE/big_heading]

Attributes:

Bolding a part of the title makes it inherit the Main Highlight color

 

Button Link

[button href="" target="" css_classes="e.g. button_hilite button_pale small_button"]Button Text[/button]

Attributes:

Classes available to pass to the "css_classes" attribute:
For button colors your options are:
For size your options are:
Finally you can add a CSS class for the font-style:
Adding icons to your buttons
First off pick the icon you want to use (Features->Entypo Icons page in the Demo), then create your button and after setting all your parameters the way you want them add the "Icon" shortcode to it's text by leaving just the icon parameter in like so: 
[icon icon="heart"][/icon]
So the end result would be something like this: 
[button href="http://google.com" target="_blank" css_classes="button_blue small_button"][icon icon="heart"][/icon]Cool Button[/button]

 

Lists

Using the TEXT editor instead of VISUAL you will see the following code generated once you click on the List shortcode:

[checklist type="eg. checked, dotted, arrowed" margin_bottom="no"]
<ul class="checked">
	<li>List Item #1</li>
	<li>List Item #2</li>
	<li>List Item #3</li>
</ul>
[/checklist]

Customizing your lists is possible via the 2 params available:

Attributes:

You can edit your lists via the Visual editor if you want ot see what is actually going on you can view the Text editor. What actually happens is the class="checked" of the UL element gets replaced at page generation with the class you pass via the "type" attribute so that's all you need to change.

 

Text Highlight

If you want to highlight some text select some of your text and click on the Highlight Shortcode Button. This will wrap the text in the Highlight shortcode that look like this:

[highlight dark="no"]TEXT[/highlight]

You can pass "Yes" to the "dark param in order to create a darker highlight.

 

Text Tooltip

If you want to add a tooltip to some text select the text in your editor and click on the Tooltip Shortcode Button. This will wrap the text in the Tooltip shortcode that look like this:

[tooltip title="Tooltip Text"]Text[/tooltip]

You can pass the text that you want to show in the tooltip once the target text gets hovered to the "title" parameter.

 

Accordion

If you want to add accordions to your page/post simply click on the Accordion Shortcode Button. Create several of those, fill in your data and you are all set.

[accordion title="Accordion Title 1" is_open="yes"]Text of Accordion 1[/accordion]
[accordion title="Accordion Title 2" is_open="no"]Text of Accordion 2[/accordion]
[accordion title="Accordion Title 3" is_open="no"]Text of Accordion 3[/accordion]

Attributes:

 

Tabs

If you want to create tabs to your page/post click on the Tabs Shortcode Button. This will create the following code

[tabs type="horizontal" class=""]
[tab title="Tab 1" icon=""]Tab content 1[/tab]
[tab title="Tab 2" icon=""]Tab content 2[/tab]
[tab title="Tab 3" icon=""]Tab content 3[/tab]
[/tabs]

Attributes:

Single Tab Item Attributes:

 

Big Title Section

This shortcode generates a grand size title with an italic subheading like the one in the Demo Home Page. Viewing it under the TEXT editor (not VISUAL) it looks like this:

[big_title small_margin="no"]
<h1>Some of <strong>Our work</strong> &amp; projects</h1>
<h2><span>We are a passionate about design bunch of fellas that take pride in their work</span></h2>
[/big_title]

Put your grand title within the H1 tag and the subheading withing the H2 tag. If you want to highlight a bit of the title wrap in a <strong> HTML element.

 

Big Icon Featured Text

This shortcode generates a big size icon with some featured text below it.

[feat_text title="Featured Title" icon="eg. screen, cog, profile, flag, bulb etc." href="" type="1"]Featured Text[/feat_text]

Attributes:

 

Iconed Featured Text Section

This shortcode generates a side-icon featured text section

[iconed_featured_text title="Featured Title" icon="heart" icon_solid="yes" icon_color="accent_color" href=""]Featured Text[/iconed_featured_text]

Attributes:

 

Testimonial Carousel

[testimonials heading="Testimonials" auto_scroll="yes"][testimonial width="1/2" author="Author Name #1" author_title="Author Title #1"]Testimonial Content #1[/testimonial][testimonial width="1/2" author="Author Name #2" author_title="Author Title #2"]Testimonial Content #2[/testimonial][/testimonials]

Attributes:

If you want to change the autoscroll speed you can edit your /js/common.js file and replace "auto: (is_auto_scroll ? 6 : 0)," with "auto: (is_auto_scroll ? 10 : 0)," for example where 10 is the number of seconds between scrolls.

 

Post Carousel

This shortcode generates a carousel of posts where you can select the post type, filter through them and customize the output.

[posts_carousel heading="Latest Posts" light_heading="no" large_heading="no" centered_heading="yes" heading_bottom_margin="no" post_type="post" category_slug="" show_pic="yes" show_date="yes" show_read_more="no" order_by="date" order="DESC" limit="10" excerpt="yes" excerpt_char_limit="64" exclude_current="yes" width="four columns" scroll_by="4"][/posts_carousel]

Attributes:

 

Portfolio Carousel

This shortcode generates a carousel of items from the Portfolio post type, styled accordingly.

[portfolio_carousel heading="Your Title" centered_heading="yes" limit="10" order_by="rand" category_name="" display_type="1"][/portfolio_carousel]

Attributes:

 

Image Slider

The built in image slider shortcode creates a simple image slider.

[slider animation="fade" speed="7000"][slide link="" title=""]image url[/slide][slide link="" title=""]image url[/slide][/slider]

Attributes:

 

Iconed Custom Slides

Creates titled custom slides controlled by icons below them. Make sure you keep the structure intact ("custom slides" are in a "custom_slides_holder" shortcode and the "custom_slide_button" are wrapped in a "custom_slides_controls" shortcode)

[custom_slides heading="Custom Slides" height="300" auto_scroll="yes" icon_type="1" auto_time="8"]
	[custom_slides_holder]
		[custom_slide id="1"]Slide #1 Content[/custom_slide]
		[custom_slide id="2"]Slide #2 Content[/custom_slide]
	[/custom_slides_holder]

	[custom_slides_controls]
		[custom_slide_button id="1" width="two" icon="rocket" title="Title #1"][/custom_slide_button]
		[custom_slide_button id="2" width="two" icon="users" title="Title #2"][/custom_slide_button]
	[/custom_slides_controls]
[/custom_slides]

Attributes:

 

Single Slide Attributes(custom_slide):

 

Slide Controls (custom_slide_button) Attributes:

 

TextBox

Creates a boxed text, possibly with a call to action button

[text_box title="Text Box Title" text="Text Box Text" margined="yes" no_bgr="no"][button href="#" css_classes="button_hilite small_button"]Portfolio[/button][/text_box]

Attributes:

 

Bar Graphs

Creates animated Bar Graphs

[bar_graphs]
[bar_graph title="Graph Title #1" percent="70" color="blue"][/bar_graph]
[bar_graph title="Graph Title #2" percent="60" color="green"][/bar_graph]
[bar_graph title="Graph Title #3" percent="80" color="orange"][/bar_graph]
[/bar_graphs]

Attributes:

 

Animated Counters

Creates animated Counters

[counters centered="yes"]
[column width="four" position="first"][counter_item id=1 number="77" title="Counter Title 1"][/counter_item][/column]
[column width="four" position=""][counter_item id=2 number="88" title="Counter Title 2"][/counter_item][/column]
[column width="four" position=""][counter_item id=3 number="99" title="Counter Title 3"][/counter_item][/column]
[column width="four" position="last"][counter_item id=4 number="120" title="Counter Title 4"][/counter_item][/column]
[/counters]

Attributes:

 

Animated Counter Circles

Creates animated Counters

[counter_circles dark_circles="no"]
[counter_circle_item id=1 number="77" title="Counter Title 1"][/counter_circle_item]
[counter_circle_item id=2 number="88" title="Counter Title 2"][/counter_circle_item]
[counter_circle_item id=3 number="99" title="Counter Title 3"][/counter_circle_item]
[/counter_circles]

Attributes:

 

Clients & Partners Section

Creates a Client section with tooltipped logos

[clients_section heading="Partners & Clients" subheading="The jolly bunch we get to work with" text="Cleints Section Description Text"]
[logo img_url="" text="" href=""][/logo]
[logo img_url="" text="" href=""][/logo]
[logo img_url="" text="" href=""][/logo]
[/clients_section]

Attributes:

 

Table Savia-Style

Add a simple table styled along with the theme. If you go to the TEXT editor you will see it is simply a regular table with a custom class that adds its styling. Manage your table-cell content there and you are good to go.

 

Price Table

Add a price table to your page post.

[price_table columns="4"]
[price_column title="Standard"][price_amount]$39[/price_amount][price_desc]Feature 1[/price_desc][price_desc]Feature 2[/price_desc][price_desc]Feature 3[/price_desc][price_footer][button href="" target="" css_classes="small_button button_pale"]SignUp[/button][/price_footer][/price_column]
[price_column title="Upgraded"][price_amount]$49[/price_amount][price_desc]Feature 1[/price_desc][price_desc]Feature 2[/price_desc][price_desc]Feature 3[/price_desc][price_footer][button href="" target="" css_classes="small_button button_pale"]SignUp[/button][/price_footer][/price_column]
[price_column type="featured" title="Premium"][price_amount]$69[/price_amount][price_desc]Feature 1[/price_desc][price_desc]Feature 2[/price_desc][price_desc]Feature 3[/price_desc][price_footer][button href="" target="" css_classes="small_button button_hilite"]SignUp[/button][/price_footer][/price_column]
[price_column type="" title="Professional"][price_amount]$99[/price_amount][price_desc]Feature 1[/price_desc][price_desc]Feature 2[/price_desc][price_desc]Feature 3[/price_desc][price_footer][button href="" target="" css_classes="small_button button_pale"]SignUp[/button][/price_footer][/price_column]
[/price_table]

Attributes:

 

 

Message Box

Add a message box

[message type="information"]Information Message Text...[/message]
[message type="success"]Success Message Text...[/message]
[message type="attention"]Attention Message Text...[/message]
[message type="warning_msg"]Warning Message Text...[/message]

Attributes:

 

Person

Add a Personal Info section. These go best within a set of columns, so for example create a 4-column Row container and within each column add the shortcode.

[person name="John Doe" picture_url="" title="Manager" description="Description" circled="yes" twitter="" facebook="" googleplus="" linkedin="" pinterest=""][/person]

Attributes:

 

Image Side Text Section

Add a Featured text with a custom image on the side. Best used for testimonials but could also be used for other purposes. Keep the structure intact - "image_featured_text_holder" is the global shortcode holder, "image_featured_text_holder_row" is a row that holds a set of "image_featured_text".

[image_featured_text_holder]
	[image_featured_text_holder_row]
		[image_featured_text image_url="" author="" position=""]Image Side Text[/image_featured_text]
		[image_featured_text image_url="" author="" position=""]Image Side Text[/image_featured_text]
	[/image_featured_text_holder_row]
	[image_featured_text_holder_row]
		[image_featured_text image_url="" author="" position=""]Image Side Text[/image_featured_text]
		[image_featured_text image_url="" author="" position=""]Image Side Text[/image_featured_text]
	[/image_featured_text_holder_row]
[/image_featured_text_holder]

Attributes for "image_featured_text":

 

Icon

Add an icon to your content. Can be added to buttons as well without the "color", "size" and "icon_solid" attributes.

[icon icon="heart" color="blue" size="small" icon_solid="no"][/icon]

Attributes:

When using icons in buttons leave only the "icon" attribute and remove the rest as it inherits the other styles from the button settings.

When using icons in Revolution Slider buttons use the following structure where instead of "feather" put your icon name:

<i class="icon feather">&nbsp;</i>

 

Spacing

Sometimes you just want some simple spacing between elements and the default WP paragraph is either too big or too small. Use the spacing shortcode.

[spacing margin="no" border="no"][/spacing]

Attributes:

 

Video (Youtube & Vimeo)

Embedding Youtube and Vimeo videos is extremely simple. Just click on the shortcode and pass the ID of your video to the ID parameter. The ID is in your URL when watching a Youtube video, for example for this - https://www.youtube.com/watch?v=DjW3DE6Lq4s the ID is "DjW3DE6Lq4s". For a Vimeo video - http://vimeo.com/10145153 it would be "10145153".

[youtube id="DjW3DE6Lq4s"]

[vimeo id="10145153"]

Attributes:

Note: Videos automatically resize to the width of their container, that is how they are responsive at all times and look great on mobile devices. So if you want to resize a video, simply wrap it in a column shortcode that has a defined width, for example: 

[column width="1/3" position="first"][youtube id="DjW3DE6Lq4s"][/column]

 

How to translate

The translation file is located in languages folder '/wp-content/themes/savia/languages'. Edit the .po file using POEdit, use the translation field to add your Translations. Once you are done save file with your language name like so de_DE.po. It will automatically generate both a .po and .mo file for your translation. Next edit wp-config.php located in the root folder of your wordpress installation and define the WPLANG prefix with your language name which should be uniform with the translation file name.

Savia is also tested and works well with WPML and qTranslate plugins.

 

 

Revolution Slider

RevolutionSlider for WP is a Premium WP Slider ($19 Value - FREE) that is extremely powerful and once you get used to it you will be able to create awesome sliders with stunning effects!

Please Note: A separate Documentation on RevolutionSlider is included with the package(/RevolutionSlider/documentation/)! We find the interface of the plugin pretty straightforward but we highly recommend you go over its documentation before you start creating your sliders. Experimenting and playing around with the slider will definitely payoff in time + you will discover how powerful the plugin really is and its cool features.

To install RevolutionSlider, and add it to a page do the following:

 

 

WooCommerce

Savia theme is WooCommerce ready! Simply install the plugin and start selling in no time.

If you are importing the Demo data you might notice an inconsistency in your "Shop" pages - you probably created the default pages (Shop, Cart, Checkout) at WooCommerce installation, so now you will have duplicates (if you imported Savia Demo Data), simply go to your pages and remove the unwanted pages (unused pages) and fix your Menus to point to the correct Shop page (Appearance->Menus). You can also manage your shop page at "WooCommerce->Settings->Products".

For my Demo here's the product image sizes I used (you can set yours to the same numbers and regenerate Images if you want the Demo product images to look OK). Make sure you set those numbers at "WooCommerce->Settings->Products" for the same results:

 

 

A separate section under Savia Options is also available for you to customize your store, set the column layouts you want to use, as well as add content above your shop like a slider or whatever you feel like. You can also switch on/off the custom Zoom feature.

For more on the plugin, please check its Documentation